import React, { useEffect, useState } from 'react';
import './index.less';
import { history } from 'umi';
type Props = {};
import img1 from '@/pages/home/xl4/img1.jpg';
import img2 from '@/pages/home/xl4/img2.jpg';
import img3 from '@/pages/home/xl4/img3.jpg';
import img4 from '@/pages/home/xl4/img4.jpg';
import img5 from '@/pages/home/xl4/img5.jpg';

export default function index({}: Props) {
  let [name, setname] = useState('');
  let [input, setinput] = useState('');
  let [img, setimg1] = useState([img1, img2, img3, img4, img5]);
  let [shuju, setshuju] = useState([]);
  let [sess, setsess] = useState([]);
  let [path, setpath] = useState();
  let [show, setshow] = useState(true);
  let [style, setstyle] = useState('');
  let [divy, setdivy] = useState(10);
  let [divx, setdivx] = useState(2);

  // //
  // const [isMoving, setIsMoving] = useState(false)
  // const [lastX, setLastX] = useState(0);
  // const [lastY, setLastY] = useState(0);
  // const [translateX, setTranslateX] = useState(0);
  // const [translateY, setTranslateY] = useState(0);
  // const [isSel, setIsSel] = useState(true)

  // //
  useEffect(() => {
    setname(history.location.state);
    //
  }, []);
  // //鼠标按下事件
  // const mouseDown = () => {
  //   setIsMoving(true)
  // }
  // //鼠标移动事件
  // const onMove = (e) => isMoving && isSel && move(e)

  // const move = (e) => {
  //   e.stopPropagation();
  //   e.preventDefault();
  //   if (lastX && lastY) {
  //     let dx = e.clientX - lastX
  //     let dy = e.clientY - lastY
  //     setTranslateX(translateX + dx);
  //     setTranslateY(translateY + dy);
  //   }
  //   setLastX(e.clientX)
  //   setLastY(e.clientY)

  // }
  // // 鼠标抬起的事件
  // const mouseUp = (e) => {
  //   if (e != null) {

  //   }
  //   setIsMoving(false)
  // }

  return (
    <div className="xl4">
      <div className="title">
        <div>昵称：{name}</div>许愿墙
      </div>
      <input
        type="text"
        placeholder="请输入你的心愿"
        value={input}
        onChange={(e) => {
          setinput(e.target.value);
        }}
      />
      <br />
      {img.map((item, index) => {
        return (
          <img
            key={index}
            src={item}
            onClick={() => {
              console.log(item);
              setpath(item);
              setshuju(item);
              setshow(false);
            }}
            style={{ border: style }}
          />
        );
      })}
      <br />
      <button
        disabled={show}
        onClick={() => {
          console.log(shuju);
          // aaa = sess
          if (sess.length >= 6) {
            alert('最多只能六条');
          } else {
            let aaa = sess;
            let obj = { shuju: shuju, input: input };
            // aaa.unshift(obj)
            // setsess((sess.push({shuju:shuju,input:input})))
            aaa.unshift({ shuju: shuju, input: input });
            setsess((sess = aaa));
          }
        }}
      >
        {show === false ? '许愿' : '再想想'}
      </button>
      <br />
      <img
        src={shuju}
        alt=""
        style={{ display: shuju.length === 0 ? 'none' : '' }}
      />
      {sess.map((item, index) => {
        return (
          <div
            key={index}
            style={{
              width: '100px',
              height: '100px',
              background: `url(${item.shuju}) no-repeat`,
              backgroundSize: '100% 100%',
              color: 'white',
              fontSize: '2rem',
              position: 'fixed',
              top: `${divy}rem`,
              right: `${divx}rem`,
            }}
            onMouseDown={(e) => {
              e.stopPropagation();
              // 获取当前鼠标按下的位置
              let x1 = e.clientX;
              let y1 = e.clientY;
              // console.log(x1,y1);
              // 偏移量
              let L1 = e.target.offsetLeft;
              let T1 = e.target.offsetTop;
              let a = e.target;
              document.onmousemove = (e) => {
                // 获取鼠标的当前位置
                var x2 = e.clientX;
                var y2 = e.clientY;
                // 移动盒子的位置
                a.style.left = x2 - x1 + L1 + 'rem';
                a.style.top = y2 - y1 + T1 + 'rem';
              };
              document.onmouseup = (e) => {
                this.state.top = e.target.style.top;
                this.state.left = e.target.style.left;
                // console.log(this.state.top,this.state.left);
                this.state.wishList[index].top = this.state.top;
                this.state.wishList[index].left = this.state.left;
                localStorage.setItem(
                  'wishList',
                  JSON.stringify(this.state.wishList),
                );
                document.onmousemove = null;
              };
            }}
          >
            {/* <img src={item.shuju} alt="" /> */}
            {item.input}
            <span style={{ backgroundColor: 'rgb(232, 234, 237)' }}>X</span>
          </div>
        );
      })}
    </div>
  );
}
